<template>
  <el-header class="custom-header" fixed>
    <!-- 大屏模式 -->
    <div v-if="!isMobile && !isMedium" class="header-wrapper large-screen">
      <el-row
          type="flex"
          justify="space-between"
          align="middle"
          class="main-header"
      >
        <!-- Logo -->
        <div class="logo-container">
          <router-link :to="{ name: 'ShopMain' }">
            <img src="@/assets/logo.png" alt="XX网" class="logo-img" />
            <span class="logo-text">XX网购物平台</span>
          </router-link>
        </div>

        <!-- 导航菜单 -->
        <el-menu
            mode="horizontal"
            :router="true"
            background-color="transparent"
            text-color="#333"
            active-text-color="#409EFF"
            class="nav-menu"
        >
          <el-menu-item
              v-for="item in productType"
              :key="item.typeKey"
              @click="goToProductType(item.typeKey)"
          >{{ item.typeValue }}
          </el-menu-item
          >
        </el-menu>

        <!-- 用户操作列 -->
        <div class="user-actions">
          <el-dropdown>
            <el-link icon="el-icon-user" class="user-link">人名</el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-s-custom" @click.native="goToShopProfile">个人中心</el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button" @click.native="logout">注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-link icon="el-icon-shopping-cart" class="cart-link" @click="goToShopCart"
          >购物车
          </el-link
          >
          <el-link icon="el-icon-credit-card" class="order-link"
                   @click.native="goToShopOrder"
          >我的订单
          </el-link
          >
        </div>
      </el-row>

      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="10" class="search-input-col">
            <el-input
              placeholder="大屏幕输入框"
              prefix-icon="el-icon-search"
              v-model="t_searchInput"
              clearable
              class="search-input"
            >
            </el-input>
          </el-col>

          <el-col :span="2" class="search-button-col">
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
                class="search-btn"
            >搜索
            </el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 中屏模式 -->
    <div v-else-if="isMedium" class="header-wrapper medium-screen">
      <el-row
          type="flex"
          justify="space-between"
          align="middle"
          class="main-header"
      >
        <!-- 菜单按钮 -->
        <div class="menu-toggle">
          <el-dropdown>
            <el-button icon="el-icon-menu" class="menu-btn"> 菜单</el-button>
            <el-dropdown-menu slot="dropdown">
              <!-- 用户操作列 -->
              <el-dropdown-item>
                <el-link icon="el-icon-user" style="color: #333">人名</el-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link icon="el-icon-shopping-cart" style="color: #333"
                         @click="goToShopCart">购物车
                </el-link
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link icon="el-icon-credit-card" style="color: #333"
                         @click.native="goToShopOrder"
                >我的订单
                </el-link
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!-- Logo -->
        <div class="logo-container">
          <router-link :to="{ name: 'ShopMain' }">
            <img src="@/assets/jumailogo.png" alt="聚买网" class="logo-img" />
          </router-link>
        </div>

        <!-- 导航菜单 -->
        <el-menu
            mode="horizontal"
            router
            background-color="transparent"
            text-color="#333"
            active-text-color="#409EFF"
            class="nav-menu"
        >
          <el-menu-item
              v-for="item in productType"
              :key="item.typeKey"
              @click="goToProductType(item.typeKey)"
          >{{ item.typeValue }}
          </el-menu-item
          >
        </el-menu>
      </el-row>

      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="16" class="search-input-col">
            <el-input
              placeholder="中屏幕输入框"
              prefix-icon="el-icon-search"
              v-model="t_searchInput"
              clearable
              class="search-input"
            >
            </el-input>
          </el-col>

          <el-col :span="4" class="search-button-col">
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
                class="search-btn"
            >搜索
            </el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 小屏模式 -->
    <div v-else class="header-wrapper small-screen">
      <el-row
          type="flex"
          justify="space-between"
          align="middle"
          class="main-header"
      >
        <!-- 菜单按钮 -->
        <div class="menu-toggle">
          <el-button
              icon="el-icon-menu"
              class="menu-btn"
              @click="toggleDrawer"
              style="width: 100%"
          >
            菜单
          </el-button>
        </div>

        <!-- Logo -->
        <div class="logo-container">
          <router-link :to="{ name: 'ShopMain' }">
            <img
              src="@/assets/jumailogo.png"
              alt="聚买网"
              class="logo-img-small"
            />
          </router-link>
        </div>
      </el-row>

      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="20" class="search-input-col">
            <el-input
              placeholder="小屏幕输入框"
              prefix-icon="el-icon-search"
              v-model="t_searchInput"
              clearable
              class="search-input"
            >
            </el-input>
          </el-col>

          <el-col :span="4" class="search-button-col">
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
                class="search-btn"
                style="width: 100%"
            >搜索
            </el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 抽屉 -->
    <el-drawer
        title="菜单"
        :visible.sync="drawer"
        :direction="direction"
        :destroy-on-close="true"
        size="40%"
        :modal="false"
    >
      <div>
        <!-- 抽屉中的用户操作 -->
        <div>
          <el-dropdown>
            <el-link icon="el-icon-user" style="color: #333">人名</el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-s-custom"
                                @click.native="goToShopProfile">个人中心
              </el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-switch-button"
                                @click.native="logout"
              >注销
              </el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>

          <el-link
              icon="el-icon-shopping-cart"
              style="margin-left: 15px; color: #333"
              @click.native="goToShopCart"
          >购物车
          </el-link
          >
          <el-link
              icon="el-icon-credit-card"
              style="margin-left: 15px; color: #333"
              @click.native="goToShopOrder"
          >我的订单
          </el-link
          >
        </div>

        <!-- 导航菜单区域 -->
        <div>
          <h3 class="menu-title">分类导航</h3>
          <el-row
              type="flex"
              justify="space-between"
              v-for="(row, rowIndex) in chunkedProductTypes"
              :key="rowIndex"
          >
            <el-col :span="12" v-for="item in row" :key="item.typeKey">
              <el-link
                  @click="goToProductType(item.typeKey)"
                  style="color: #333"
              >
                {{ item.typeValue }}
              </el-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </el-header>
</template>
<script>
export default {
  name: "shopHeader",
  data() {
    return {
      drawer: false,
      direction: "rtl",
      screenWidth: window.innerWidth, // 声明 screenWidth 并初始化

      t_searchInput:this.searchInput,
      productType: [
        { typeKey: 3, typeValue: "数码电器" },
        { typeKey: 4, typeValue: "家具厨具" },
        { typeKey: 5, typeValue: "服装箱包" },
        { typeKey: 6, typeValue: "美妆清洁" },
        { typeKey: 7, typeValue: "食品生鲜" },
        { typeKey: 8, typeValue: "图书文娱" },
      ],
    };
  },
  computed: {
    // 将 productType 数组分组为每行两个元素
    chunkedProductTypes() {
      const chunkSize = 2;
      let result = [];
      for (let i = 0; i < this.productType.length; i += chunkSize) {
        result.push(this.productType.slice(i, i + chunkSize));
      }
      return result;
    },
  },
  watch:{
    searchInput(newVal) {
      this.localSearchInput = newVal;
    },
    t_searchInput(newVal) {
      // console.log(newVal)
      this.$emit('update:searchInput', newVal);
    }
  },
  props: {
    isMobile: Boolean,
    isMedium: Boolean,
    searchInput: String,
  },
  mounted() {
    // 页面加载时立即检查屏幕宽度
    this.checkScreenSize();

    // 监听窗口大小变化
    window.addEventListener("resize", this.handleResize);
  },
  beforeUnmount() {
    // 组件销毁时移除监听器
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    logout() {
      console.log("logout");
      localStorage.removeItem("token"); // 清除本地存储的 token
      this.$router.push('/login'); // 跳转到登录页面
    },
    handleSearch() {
      this.$emit("search");
    },
    toggleDrawer() {
      this.drawer = !this.drawer;
    },
    handleResize() {
      this.screenWidth = window.innerWidth;
      this.checkScreenSize();
    },
    goToProductType(type) {
      if (this.$route.path !== "/shop/products/" + type) {
        this.$router.push({
          name: "ShopProducts",
          params: { productType: type },
        });
      }
    },
    goToShopProfile() {
      if (this.$route.path !== '/shopProfile') {
        this.$router.push('/shopProfile');
      }
    },
    goToShopCart() {
      if (this.$route.path !== '/shopCart') {
        this.$router.push('/shopCart');
      }
    },
    goToShopOrder() {
      if (this.$route.path !== '/shopOrder') {
        this.$router.push('/shopOrder');
      }
    },
    checkScreenSize() {
      if (this.screenWidth > 992) {
        this.handleLargeScreen();
      } else if (this.screenWidth >= 577 && this.screenWidth <= 992) {
        this.handleMediumScreen();
      } else {
        this.handleSmallScreen();
      }
    },
    handleLargeScreen() {
      this.drawer = false;
    },
    handleMediumScreen() {
      this.drawer = false;
    },
    handleSmallScreen() {
      this.drawer = false;
    },
  }
};
</script>
<style scoped>
.custom-header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  z-index: 100;
  padding: 0 !important;
}

.header-wrapper {
  width: 100%;
}

.main-header {
  height: 60px;
  padding: 0 20px;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 30px;
  vertical-align: middle;
}

.logo-img-small {
  width: 40px;
  vertical-align: middle;
}

.logo-text {
  margin-left: 8px;
  color: #333;
  text-decoration: none;
  white-space: nowrap; /* 防止文本换行 */
}

.nav-menu {
  border-bottom: none !important;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.nav-menu .el-menu-item {
  padding: 0 15px !important;
  margin: 0;
  white-space: nowrap;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 20px; /* 增加元素之间的间距 */
}

.cart-link,
.order-link {
  margin-left: 20px;
  color: #333;
}

.search-bar {
  padding: 10px 0;
  border-top: 1px solid #eee;
}

.search-input-col,
.search-button-col {
  padding: 0 10px;
}

.search-input {
  width: 100%;
}

.search-btn {
  width: 100%;
}

.menu-toggle {
  display: flex;
  align-items: center;
}

.menu-btn {
  width: 100%;
}

.user-actions .el-link {
  font-size: 14px; /* 调整字体大小 */
  display: inline-flex; /* 使用行内 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
  white-space: nowrap; /* 防止文本换行 */
}

.user-actions .el-icon-user,
.user-actions .el-icon-shopping-cart,
.user-actions .el-icon-credit-card {
  font-size: 16px; /* 调整图标大小 */
  margin-right: 5px; /* 调整图标与文字之间的间距 */
}

.user-actions .el-link span {
  margin-left: 5px; /* 调整文字与图标之间的间距 */
}

/* 抽屉相关样式 */

@media (min-width: 993px) {
  .logo-text {
    display: inline-block;
  }
}
@media (max-width: 992px) {
  .large-screen {
    display: none;
  }

  .medium-screen {
    display: block;
  }
  .logo-text {
    display: none; /* 在中屏幕模式下隐藏文本 */
  }
}

/* 中屏幕模式下的样式 */
@media (max-width: 992px) and (min-width: 577px) {
  .main-header {
    justify-content: flex-start; /* 从左开始排列 */
  }

  .menu-toggle {
    display: block; /* 确保菜单按钮显示 */
    margin-right: 20px; /* 与其他元素保持间距 */
  }

  .logo-container {
    margin: 0 20px; /* 调整 Logo 与菜单和其他元素的间距 */
  }

  .nav-menu {
    justify-content: flex-start; /* 导航菜单从左开始排列 */
    margin-left: 20px; /* 调整导航菜单与 Logo 的间距 */
  }

  .logo-text {
    display: none; /* 在中屏幕模式下隐藏文本 */
  }
}

@media (max-width: 576px) {
  .logo-text {
    font-size: 12px; /* 小屏幕下的字体大小 */
  }
  .logo-container {
    width: auto;
  }
  .logo-text {
    display: none; /* 在小屏幕模式下隐藏文本 */
  }
}
</style>
  
